import React, { useEffect, useState } from 'react';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import './tabBar.less'
import { useHistory } from 'react-router-dom';

import homeImg from '../../assets/images/tabbar/home_2.png'
import homeImgActive from '../../assets/images/tabbar/home_1.png'
import fastImg from '../../assets/images/tabbar/fast.png'
import myImg from '../../assets/images/tabbar/my_2.png'
import myImgActive from '../../assets/images/tabbar/my_1.png'

const routers = ['/home', '/fast', '/user']
export default function TabBar() {
    const [isShow, setIsShow] = useState(true)
    let history = useHistory();
    const [value, setValue] = useState(0);
    // 进行刷新后的value的值的重新修改
    useEffect(() => {
        const index = routers.indexOf(history.location.pathname)
        setValue(index)
        setIsShow(index !== -1)
    }, [history.location.pathname])
    const changeFn = (event, v) => {
        setValue(v);
        history.push(routers[v]);
    }
    return (
        <BottomNavigation
            value={value}
            onChange={changeFn}
            showLabels
            className="tab-bar"
            style={{ display: isShow ? 'flex' : 'none' }}
        >
            <BottomNavigationAction label="首页" icon={<img alt="homeImg" src={value === 0 ? homeImgActive : homeImg} />} />
            <BottomNavigationAction label="快速刷题" icon={<img alt="fastImg" src={fastImg} />} />
            <BottomNavigationAction label="我的" icon={<img alt="myImg" src={value === 2 ? myImgActive : myImg} />} />
        </BottomNavigation>
    )
}
